<div id="efan" class="corner-all" style="height: 27px; position: absolute;"></div>
<ul id="nav-menu" class="shadow corner-top">
    <li id="home" class="active"><a href="index.php"><span class="icon"></span></a></li>
    <li id="the-municipality">
        <a href="#">The Municipality</a>
        <ul class="sub-menu shadow corner-all">
            <li><a href="#">Map</a></li>
            <li><a href="history.php">History</a></li>
            <li><a href="#">Municipal Departments</a></li>
            <li><a href="#">Municipal Chart</a></li>
            <li><a href="#">Tourism</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Form Requesting</a>
        <ul class="sub-menu shadow corner-all">
            <li><a href="#" class="">Birth Certificate</a></li>
            <li><a href="#">Marriage Certificate</a></li>
            <li><a href="#">Death Certificate</a></li>
            <li><a href="#">Business Permit</a></li>
        </ul>
    </li>
    <li><a href="#">Citizen's Charter</a>
    </li>
    <li>
        <a href="#">Affiliates</a>
        <ul class="sub-menu shadow corner-all">
            <li><a href="#">Some affliates here</a></li>
            <li><a href="#">and here</a></li>
            <li><a href="#">and here</a></li>
            <li><a href="#">and here</a></li>
        </ul>
    </li>  
    <li><a href="#">FAQ's</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">About Us</a></li>
    <li class="float-right" id="login"><a href="#">Log in</a></li>
</ul>

<div id="login-container" class="border-all shadow corner-bottom" >
    <img src="resources/images/icons/login_icon.png" class="float-left" style="width: 50px; height: 50px;">
    <h2 class="float-left margin-left">Administration Login</h2>
    <div style="clear: both"></div>
    <form id="form-login" method="post" class="margin-top">
        <table>
            <tbody>
                <tr>
                    <td><label for="username">User name:</label></td>
                    <td><input type="text" name="username" id="username" class="" placeholder="Enter your username" tooltip="This field is required."/></td>
                </tr>
                <tr>
                    <td><label for="password">Password:</label></td>
                    <td><input type="password" name="password" id="password" placeholder="Enter your password" tooltip="This field is required."/></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" id="btn-login" class="btn btn-green" value="Log in" tooltip="Click to login." />
                        <input type="reset" id="btn-cancel" class="btn float-right" value="Cancel" />
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <div id="response"></div>
</div>
<script language="javascript">
    $(document).ready(function(){
        
       
        $("#form-login").submit(function(event) {
            event.preventDefault(); 
            $.post('resources/actions/act-login.php',$('#form-login').serialize(), function(data) {
                $('#response').html(data).fadeIn('normal');
            });
        });
      
        
        $('#username, #password, #btn-login').tooltip();
        
        function loginContainerPosition(){
            var right = $('#wrapper').offset().left,
            width = $('#login-container').width();
            $('#login-container').css({right: right});
   
        }
        
        loginContainerPosition();
        
        
        $('#login').click(function(event){
            $('#username').val('');
            $('#password').val('');
            $('#response').html('');
            loginContainerPosition();
            $('#login-container').slideToggle(300);
            $('#username').focus();
            event.stopPropagation();
            
        });
       
       $('body').click(function(event) {
            $('#login-container').slideUp(300);
        });
       $('#login-container').click(function(event){
            event.stopPropagation();
        });
       
       
       $('#btn-cancel').click(function(){
            $('#login-container').slideUp(300);
       });
       
    });
</script>
